<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberstore">媒体管理</router-link>
      <router-link tag="li" to="/ymMemberstorecomboaddsubmit">套餐管理</router-link>
      <router-link tag="li" to="/ymMembermysubmitactivity">我的活动</router-link>
      <router-link tag="li" to="/ymMembersubmitmycase">我的案例</router-link>
      <router-link tag="div" to="/ymMemberstorecomboadd" class="uploading">添加套餐</router-link>
      <!--<router-link tag="p" to="/ymMemberstorecomboadd" class="uploading">
      	<img src="../assets/ym-member/media/return.png" />返回
      </router-link>-->
    </ul>
    <div class="cont">
      <h4>套餐列表</h4>
      <div>
        <div class="soso">
          <input type="text" placeholder="请输入套餐名称的关键词" />
          <div class="btn"><span>搜索</span></div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="model" v-for="combo in comboList" :key="combo">
        <div class="title">
          <a href="../../static/a-link/ymCombo.html">
          	<img width="208px" height="136px" :src="combo.imageUrl" />
          </a>
          <div class="text">
            <h4>{{combo.title}}</h4>
            <p>覆盖地区：<span>北京海淀区 朝阳区 5个媒体</span>
            <span class="price">原价{{combo.currentPrice}}{{combo.priceunit}}</span>
            <span class="color">{{combo.currentPrice}}{{combo.priceunit}}</span>
            <span class="compile">编辑</span><span class="del">删除</span></p>
            <p>{{combo.startTime}}  --  {{combo.endTime}}</p>
          </div>
        </div>
        <h4>套餐组成</h4>
        <div class="combo">
          <dl v-for="media in combo.mediaList" :key="media">
            <dt><img width="204px" height="133px" :src="media.cover" /></dt>
            <dd>{{media.mediaName}}</dd>
            <dd>刊例价：{{media.prices}}{{media.lightStyleId}}</dd>
          </dl>
        </div>
      </div>
    </div>
    <!--  分页器  -->
    <div class="paging">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-store",
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
      	user:null,
        shos: 0,
        comboList:[],
      }
    },
    mounted(){
    	this.getUserInfo();
    	this.getCombo();
    },
    methods:{
    	getUserInfo:function(){
	  		this.user = JSON.parse(localStorage.getItem("user"));
	  	},
	  	getCombo:function(){
	  		this.$http.post(this.requestAddr+"/GetJson/getComboList",{"memberId":this.user.autoId},{emulateJSON:true}).then(
	  			(res)=>{
	  				if(res.data.comboList == null || res.data.comboList.length == 0){
	  					window.location.href = "../#/ymMemberstorecombo"
	  					return
	  				}
	  				this.comboList = res.data.comboList
	  				console.log(this.comboList)
	  				for (var i=0; i<(this.comboList.length); i++) {
	  					this.comboList[i].mediaList = JSON.parse(this.comboList[i].mediaList)
	  				}	  
	  			}
	  		)
	  	}
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(2) {
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        width: 103px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        margin-left: 560px;
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          margin-right: 10px;
        }
      }
    }
    .cont {
      width: 1200px;
      background-color: white;
      margin: 0 auto;
      display: flex;
      h4 {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-left: 40px;
        padding-top: 40px;
      }
      div {
        width: 990px;
        height: 37px;
        padding-left: 50px;
        padding-top: 30px;
        p {
          font-size: 14px;
          color: #333333;
          line-height: 37px;
          margin-right: 30px;
          float: left;
        }
        .soso {
          float: right;
          width: 300px;
          height: 36px;
          border: 1px solid #dddddd;
          border-right: none;
          padding-left: 0;
          padding-top: 0;
          display: flex;
          align-items: center;
          input {
            width: 240px;
            height: 28px;
            border: none;
            padding-left: 15px;
          }
          .btn {
            width: 59px;
            height: 38px;
            color: white;
            background-color: #f29600;
            padding-left: 0;
            padding-top: 0;
            font-size: 14px;
            line-height: 38px;
            span {
              padding-left: 15px;
            }
          }
        }
      }
    }
    .content {
      width: 1200px;
      margin: 0 auto;
      background-color: white;
      padding-bottom: 30px;
      padding-top: 5px;
      .model {
        width: 1130px;
        border: 1px solid #dddddd;
        margin: 0 auto;
        padding-left: 30px;
        margin-top: 27px;
        clear: both;
        .title {
          display: flex;
          margin-top: 23px;
          .text {
            width: 840px;
            height: 136px;
            margin-left: 23px;
            margin-top: 20px;
            h4 {
              font-weight: bold;
              line-height: 30px;
              color: #333333;
              font-size: 16px;
            }
            p {
              color: #999999;
              font-size: 14px;
              line-height: 36px;
              .price {
                padding-left: 126px;
                text-decoration: line-through;
              }
              .color {
                color: #f29600;
                padding-left: 30px;
                padding-right: 130px;
                font-weight: bold;
              }
              .compile {
                font-weight: bold;
              }
              .del {
                margin-left: 30px;
                font-weight: bold;
              }
            }
          }
        }
        h4 {
          color: #333333;
          font-weight: bold;
          margin-top: 28px;
          margin-bottom: 20px;
        }
        .com{height: 445px !important;}
        .combo {
          width: 100%;
          height: 230px;
          dl {
            width: 204px;
            height: 200px;
            float: left;
            margin-right: 18px;
            padding-bottom: 20px;
            &:nth-child(n*5){
              margin-right: 0;
            }
            dd {
              padding-left: 5px;
              margin-top: 14px;
              &:nth-child(2) {
                color: #333333;
                font-size: 16px;
              }
              &:nth-child(3) {
                color: #f29600;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
  }
	.uploading{
	  width: 103px;
	  height: 30px;
	  font-size: 16px;
	  line-height: 30px;
	  color: white;
	  background-color: #f29600;
	  text-align: center;
	  border-radius: 7px;
	  margin-left: 560px;
	  cursor: pointer;
	}
</style>
